<template>
    <div style="margin-left: 25px;margin-top: 15px;">
        <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="转舍日期">
                <el-date-picker v-model="search.date" type="datetimerange" range-separator="-"
                    start-placeholder="Start date" end-placeholder="End date" value-format="YYYY-MM-DD"
                    style="width: 310px" />
            </el-form-item>
            <el-form-item label="羊只耳号">
                <el-input v-model="search.Earbugles" clearable />
            </el-form-item>

            <el-form-item label="转舍类型">
                <el-select v-model="search.type" clearable style="width: 123px;">
                    <el-option :label="item.name" :value="item.name" v-for="item in TransferType" :key="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="GetshiftList" :icon="Search">查询</el-button>
            </el-form-item>
            <br>
            <el-form-item label="转出栋舍">
                <el-select v-model="search.OutBuildings" clearable style="width: 123px;"
                    @change="GetHandleGetSheepFarm">
                    <el-option :label="item.Name" :value="item.Name" v-for="item in CottagerList" :key="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="转出栏位">
                <el-select v-model="search.OutColunm" clearable style="width: 123px;">
                    <el-option :label="item.Name" :value="item.Name" v-for="item in ColunmList" :key="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="转入栋舍">
                <el-select v-model="search.InBuildings" clearable style="width: 123px;"
                    @change="InGetHandleGetSheepFarm">
                    <el-option :label="item.Name" :value="item.Name" v-for="item in InCottagerList" :key="item.Id" />
                </el-select>
            </el-form-item>
            <el-form-item label="转入栏位">
                <el-select v-model="search.InColunm" clearable style="width: 123px;">
                    <el-option :label="item.Name" :value="item.Name" v-for="item in InColunmList" :key="item.Id" />
                </el-select>
            </el-form-item>
        </el-form>

        <div style="margin-top: 9px;">
            <el-button type="danger" size="default" :icon="Plus" @click="OpenDialog">新增</el-button>
            <el-button type="danger" size="default" :icon="Delete" @click="DelAll">删除</el-button>
        </div>
        <div style="margin-top: 25px;">
            <el-table :data="shiftList" stripe style="width: 85%" @selection-change="GetBreedingIds">
                <el-table-column type="selection" width="35" fixed align="center" />
                <el-table-column prop="name" label="序号" align="center" fixed>
                    <template #default="a">
                        <span>{{ a.$index + (page.pageIndex - 1) * page.pageSize + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="transferDate" label="转舍日期" align="center" width="130">
                    <template v-slot="a">
                        <span v-if="a.row.transferDate"> {{ a.row.transferDate.substring(0, 10) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="earbugles" label="羊只耳号" align="center" width="130" />
                <el-table-column prop="transferTypeName" label="转舍类型" align="center" width="130" />
                <el-table-column prop="originallyDorm" label="转出栋舍" align="center" width="130" />
                <el-table-column prop="originallyColumns" label="转出栏位" align="center" width="130" />
                <el-table-column prop="dormName" label="转入栋舍" align="center" width="130" />
                <el-table-column prop="columnsName" label="转入栏位" align="center" width="130" />
                <el-table-column prop="breedName" label="品种" align="center" />
                <el-table-column prop="sex" label="性别" align="center">
                    <template v-slot="a">
                        <span v-if="a.row.sex">公</span>
                        <span v-else>母</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" align="center" />
                <el-table-column prop="createDate" label="创建时间" align="center" width="130px">
                    <template v-slot="a">
                        <span v-if="a.row.createDate">{{ a.row.createDate.substring(0, 10) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="updateBy" label="修改人" align="center" />
                <el-table-column prop="updateDate" label="修改时间" align="center" width="130px">
                    <template v-slot="a">
                        <span v-if="a.row.updateDate"> {{ a.row.updateDate.substring(0, 10) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="130px">
                    <template v-slot="a">
                        <el-link type="primary" style="margin-right: 15px;" @click="Upd(a.row.sdId)">编辑</el-link>
                        <el-link type="primary" @click="shiftDel(a.row.sdId)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <table style="margin: auto;margin-left: 300px;margin-top: 25px;">
            <tbody>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                            :page-sizes="[15, 20, 35, 50]" :background="true" layout="total, slot,sizes"
                            :total="page.totalCount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                            <span>，共{{ page.pageCount }}页，当前第{{ page.pageIndex }}/{{
                                page.pageCount
                            }}页</span>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                            :page-sizes="[15, 20, 35, 50]" :background="true" layout="slot, prev, pager, next"
                            :total="page.totalCount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                            <button class="btn-prev" @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1">
                                首页
                            </button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                            :page-sizes="[15, 20, 35, 50]" :background="true" layout="slot, jumper"
                            :total="page.totalCount" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页">
                            <button class="btn-next" @click="handleCurrentChange(page.pageCount)"
                                :disabled="page.pageIndex == page.pageCount">
                                尾页
                            </button>
                        </el-pagination>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 弹出层添加 -->
        <el-dialog v-model="dialogVisible" title="添加配种信息" width="1300" style="height: 600px;">
            <span>
                <div class="dialog-footer">
                    <div style="margin-left: 25px;margin-top: 15px">
                        <div>
                            <el-button type="danger" size="default" :icon="Plus" @click="AddRow"
                                v-show="shiftInfo.sdId == 0">新增</el-button>
                            <el-button type="danger" size="default" :icon="Document" @click="siftCreate"
                                v-show="shiftInfo.sdId == 0">保存</el-button>
                            <el-button type="danger" size="default" :icon="Document" v-show="shiftInfo.sdId != 0"
                                @click="UpdShift">修改</el-button>

                        </div>
                        <div style="margin-top: 25px;margin-left: 25px">
                            <span>
                                <span style="color: red">*</span> 转舍日期&nbsp;&nbsp;
                                <el-date-picker v-model="shiftInfo.transferDate" type="date" placeholder="请选择日期"
                                    value-format="YYYY-MM-DD" />&nbsp;&nbsp;&nbsp;
                                羊只类型&nbsp;&nbsp;
                                <input type="radio" v-model="shiftInfo.sheepType" :value="1" />种公&nbsp;
                                <input type="radio" v-model="shiftInfo.sheepType" :value="2" />种母&nbsp;
                                <input type="radio" v-model="shiftInfo.sheepType" :value="3" />后裔&nbsp;
                            </span>
                            <span style="margin-left: 15px;margin-right: 15px;">转舍类型</span>
                            <el-select v-model="shiftInfo.transferType" clearable style="width: 150px;">
                                <el-option :label="item.name" :value="item.value" v-for="item in TransferType"
                                    :key="item.value" />
                            </el-select>
                        </div>
                        <div style="margin-top: 35px;">
                            <el-table style="width: 90%" :data="RowshiftList">
                                <el-table-column label="序号" align="center">
                                    <template #default="a">
                                        {{ a.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="*耳号" align="center" width="135">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-select v-model="shiftInfo.earbugles" filterable placeholder="请输入"
                                                style="width: 120px" @change="GetSheepInfo">
                                                <el-option v-for="item in EarNumberList" :key="item.id"
                                                    :label="item.name" :value="item.name" />
                                            </el-select>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="*转入栋舍" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-select v-model="shiftInfo.dormName" clearable style="width: 125px;"
                                                @change="GetCreateInColumnList">
                                                <el-option :label="item.Name" :value="item.Name"
                                                    v-for="item in CreateInDormList" :key="item.Id" />
                                            </el-select>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="转入栏位" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-select v-model="shiftInfo.columnsName" clearable style="width: 125px;">
                                                <el-option :label="item.Name" :value="item.Name"
                                                    v-for="item in CreateInColumnList" :key="item.Id" />
                                            </el-select>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="品种" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-select v-model="shiftInfo.breed" placeholder="请选择"
                                                style="width: 100px;">
                                                <el-option :label="item.name" :value="item.value"
                                                    v-for="item in breedList" :key="item.value" />
                                            </el-select>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="性别" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-select v-model="shiftInfo.sex" placeholder="请选择" style="width: 100px;">
                                                <el-option label="公" :value="true" />
                                                <el-option label="母" :value="false" />
                                            </el-select>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="转出栋舍" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-input v-model="shiftInfo.originallyDorm" style="width: 125px"
                                                readonly />
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="转出栏位" align="center">
                                    <template v-slot="a">
                                        <span v-if="activeIndex == a.$index">
                                            <el-input v-model="shiftInfo.originallyColumns" style="width: 125px"
                                                readonly />
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </span>
        </el-dialog>

    </div>
</template>





<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { AxiosStatic } from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
    Plus, Document, Delete, Back, Search
} from '@element-plus/icons-vue'

import http from '@/http'


//批量删除
var ShiftIds = ref("");
const GetBreedingIds = (ids: any) => {
    ShiftIds.value = "";
    for (let index = 0; index < ids.length; index++) {
        ShiftIds.value += ids[index].sdId + ",";
    }
}
const AllOronly = ref(false);
const DelAll = () => {
    AllOronly.value = true;
    shiftDel(ShiftIds.value.substring(0, ShiftIds.value.length - 1));
}

//删除转舍信息
const shiftDel = (id: any) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            http.delete("Kroute/api/Shifts/ShiftDelete?Ids=" + id).then(x => {
                if (x.data > 0) {
                    if (AllOronly.value == true) {
                        AllOronly.value = false;
                        var ids = id.split(",");
                        ids.forEach((a: any) => {
                            http.get("RouteRead/api/ShiftSelects/GetShiftInfo?Id=" + a).then(x => {
                                SheepUpd.earNumber = x.data.earbugles;
                                SheepUpd.cottage = x.data.originallyDorm;
                                SheepUpd.field = x.data.originallyColumns;
                                http.put("Mroute/api/SheepFile/SheepFileConditionAuricleUpdate", SheepUpd)
                            })
                        });
                    } else {
                        http.get("RouteRead/api/ShiftSelects/GetShiftInfo?Id=" + id).then(x => {
                            SheepUpd.earNumber = x.data.earbugles;
                            SheepUpd.cottage = x.data.originallyDorm;
                            SheepUpd.field = x.data.originallyColumns;
                            http.put("Mroute/api/SheepFile/SheepFileConditionAuricleUpdate", SheepUpd)
                        })
                    }
                    ElMessage.success("删除成功")
                    GetshiftList();
                } else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消操作',
            })
        })
}

//添加信息弹出层
const dialogVisible = ref(false)
const OpenDialog = () => {
    shiftInfo.sdId = 0;
    RowshiftList.value = [];
    dialogVisible.value = true;
}

//新增行操作
var activeIndex = ref(-1);
var RowshiftList = ref<shift[]>([])
const AddRow = () => {
    var newRow = {
        "sdId": "",
        "earbugles": "",
        "dormName": "",
        "columnsName": "",
        "breed": "",
        "sex": "",
        "originallyDorm": "",
        "originallyColumns": "",
        "createBy": "",
        "createDate": "",
        "updateBy": "",
        "updateDate": "",
        "isDel": "",
    }
    RowshiftList.value.push(newRow);
    activeIndex.value = RowshiftList.value.length - 1;
}

const shiftInfo = reactive({
    "createBy": "string",
    "createDate": "2024-04-26T03:40:48.143Z",
    "updateBy": "string",
    "updateDate": "2024-04-26T03:40:48.143Z",
    "isDel": false,
    "sdId": 0,
    "earbugles": "",
    "dormName": "",
    "columnsName": "",
    "breed": 1,
    "sex": true,
    "originallyDorm": "",
    "originallyColumns": "",
    "transferDate": "",
    "sheepType": 1,
    "transferType": 1
})

//修改羊只档案信息
var SheepUpd = reactive({
    earNumber: "",
    cottage: "",
    field: "",
})
const siftCreate = () => {
    if (!shiftInfo.transferDate) {
        ElMessage.error("请选择转舍日期");
        return;
    }
    if (!shiftInfo.earbugles) {
        ElMessage.error("请输入耳号");
        return;
    }
    if (!shiftInfo.dormName) {
        ElMessage.error("请输入转入栋舍");
        return;
    }
    shiftInfo.sheepType = shiftInfo.sheepType as number;
    http.post("Kroute/api/Shifts/ShiftCreate", shiftInfo).then(x => {
        if (x.data > 0) {
            ElMessage.success("保存成功")
            SheepUpd.earNumber = shiftInfo.earbugles;//耳号
            SheepUpd.cottage = shiftInfo.dormName;//转入栋舍
            SheepUpd.field = shiftInfo.columnsName;//转入栏位
            http.put("Mroute/api/SheepFile/SheepFileConditionAuricleUpdate", SheepUpd)
            dialogVisible.value = false;
            GetshiftList();
        } else {
            ElMessage.error("保存失败")
        }
    })
}

//打开修改弹窗
const Upd = (id: any) => {
    dialogVisible.value = true;
    RowshiftList.value = [];
    http.get("RouteRead/api/ShiftSelects/GetShiftInfo?Id=" + id).then(x => {
        var res = x.data;
        shiftInfo.sdId = res.sdId;
        shiftInfo.earbugles = res.earbugles;
        shiftInfo.dormName = res.dormName;
        shiftInfo.columnsName = res.columnsName;
        shiftInfo.breed = res.breed;
        shiftInfo.sex = res.sex;
        shiftInfo.originallyDorm = res.originallyDorm;
        shiftInfo.originallyColumns = res.originallyColumns;
        shiftInfo.sheepType = res.sheepType;
        shiftInfo.transferType = res.transferType;
        shiftInfo.transferDate = res.transferDate;
        shiftInfo.createBy = res.createBy;
        shiftInfo.createDate = res.createDate;
        shiftInfo.updateBy = res.updateBy;
        shiftInfo.updateDate = res.updateDate;
        shiftInfo.isDel = res.isDel;
        AddRow();
    })
}
//修改数据
const UpdShift = () => {
    http.put("Kroute/api/Shifts/ShiftUpdate", shiftInfo).then(x => {
        if (x.data > 0) {
            ElMessage.success("修改成功")
            SheepUpd.earNumber = shiftInfo.earbugles;
            SheepUpd.cottage = shiftInfo.dormName;
            SheepUpd.field = shiftInfo.columnsName;
            http.put("Mroute/api/SheepFile/SheepFileConditionAuricleUpdate", SheepUpd)
            dialogVisible.value = false;
            GetshiftList();
        } else {
            ElMessage.error("修改失败")
        }
    })
}


const search = ref({
    date: [],
    Earbugles: "",
    type: "",
    OutBuildings: "",
    OutColunm: "",
    InBuildings: "",
    InColunm: ""
})
const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    pageCount: 0,
})
interface shift {
    "sdId": any,
    "earbugles": any,
    "dormName": any,
    "columnsName": any,
    "breed": any,
    "sex": any,
    "originallyDorm": any,
    "originallyColumns": any,
    "createBy": any,
    "createDate": any,
    "updateBy": any,
    "updateDate": any,
    "isDel": any
}
//获取转舍信息
const shiftList = ref<shift[]>([]);
const GetshiftList = () => {
    var dates = "";
    if (search.value.date) {
        dates = search.value.date.join(",");
    }
    http.get("RouteRead/api/ShiftSelects/GetShiftList", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            date: dates,
            Earbugles: search.value.Earbugles,
            type: search.value.type,
            OutBuildings: search.value.OutBuildings,
            OutColunm: search.value.OutColunm,
            InBuildings: search.value.InBuildings,
            InColunm: search.value.InColunm,
        }
    }).then(x => {
        console.log(x.data)
        shiftList.value = x.data.datas;
        page.totalCount = x.data.totalCount;
        page.pageCount = x.data.pageCount;
    })
}

const handleSizeChange = (val: any) => {
    page.pageSize = val;
    GetshiftList();
}
const handleCurrentChange = (val: any) => {
    page.pageIndex = val;
    GetshiftList();
}


//获取羊只种类
const breedList = ref<{
    name: "",
    value: ""
}[]>([]);
const GetbreedList = () => {
    http.get("RouteRead/api/ShiftSelects/GetBreed").then(x => {
        breedList.value = x.data;
    })
}
//获取转舍类型
const TransferType = ref<{
    name: "",
    value: ""
}[]>([]);
const GetTransferType = () => {
    http.get("RouteRead/api/ShiftSelects/GetTransferType").then(x => {
        TransferType.value = x.data;
    })
}

//栋舍
const CottagerList = ref<{
    Id: "",
    Name: ""
}[]>([]);
const GetHandleGetCot = () => {
    http.get("OrganizationRead/api/Cottage/HandleGetCot").then(x => {
        CottagerList.value = x.data;
    })
}
const ColunmList = ref<{
    CottageId: "",
    Id: "",
    Name: ""
}[]>([]);
const GetHandleGetSheepFarm = () => {
    if (search.value.OutBuildings) {
        http.get("OrganizationRead/api/Field/HandleGetSheepFarm?Id=" + search.value.OutBuildings).then(x => {
            ColunmList.value = x.data;
        })
    }
}

//转入栋舍和栏位
const InCottagerList = ref<{
    Id: "",
    Name: ""
}[]>([]);
const InGetHandleGetCot = () => {
    http.get("OrganizationRead/api/Cottage/HandleGetCot").then(x => {
        InCottagerList.value = x.data;
    })
}
const InColunmList = ref<{
    CottageId: "",
    Id: "",
    Name: ""
}[]>([]);
const InGetHandleGetSheepFarm = () => {
    if (search.value.InBuildings) {
        http.get("OrganizationRead/api/Field/HandleGetSheepFarm?Id=" + search.value.InBuildings).then(x => {
            InColunmList.value = x.data;
        })
    }
}

//添加用转入栋舍
const CreateInDormList = ref<{
    Id: "",
    Name: ""
}[]>([])
const GetCreateInDormList = () => {
    http.get("OrganizationRead/api/Cottage/HandleGetCot").then(x => {
        CreateInDormList.value = x.data;
    })
}
const CreateInColumnList = ref<{
    Id: "",
    Name: ""
}[]>([])
const GetCreateInColumnList = () => {
    if (shiftInfo.dormName) {
        http.get("OrganizationRead/api/Field/HandleGetSheepFarm?Id=" + shiftInfo.dormName).then(x => {
            CreateInColumnList.value = x.data;
        })
    }
}


//获取耳标下拉框
const EarNumberList = ref<{
    id: "",
    name: ""
}[]>([]);
const GetEarNumber = () => {
    http.get("MYroute/api/SheepFile/SheepFileConditionEard").then(x => {
        EarNumberList.value = x.data;
    })
}

//根据耳号获取羊只档案信息
const GetSheepInfo = () => {
    http.get("MYroute/api/SheepFile/SheepFileConditionFinds?card=" + shiftInfo.earbugles).then(x => {
        if (x.data.sex == 1) {
            shiftInfo.sex = true;
        } else {
            shiftInfo.sex = false;
        }
        shiftInfo.breed = x.data.breed;
        shiftInfo.originallyDorm = x.data.cottage;
        shiftInfo.originallyColumns = x.data.field;
    })
}


onMounted(() => {
    GetEarNumber();
    GetbreedList();
    GetTransferType();
    GetshiftList();
    GetHandleGetCot();
    InGetHandleGetCot();
    GetCreateInDormList();
})

</script>


<style></style>